<!-- 购物车-列表 -->
<template>
  <div class="cart-list">
    <div v-if="cartList.length">
			<cart-list-item 
				v-for="(item, index) in cartList" 
				:key="index" 
				:goodsItem="item"
			></cart-list-item>
		</div>
    <div v-else class="empty-cart">
      <p>购物车居然是空的（°ο°）~ @</p>
      <p>再忙，也记得买点什么犒赏自己</p>
      <p @click="goHome">去逛逛</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import CartListItem from './CartListItem';

export default {
  name: "cartList",
  data() {
    return {};
	},
	components: {
		CartListItem
	},
  computed: {
    ...mapGetters(["cartList"]),
  },
  methods: {
		goHome() {
			this.$router.replace('/home');
		}
	}
	
};
</script>
<style scoped>
.content {
  position: relative;
  top: 44px;
  left: 0;
  right: 0;
}

.empty-cart {
    padding-top: 50px;
    text-align: center;
}
.empty-cart p:nth-child(3){
    margin: 20px auto;
    width: 80px;
    padding: 4px 12px;
    background: #f3f3f3;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0, .3);
}
</style>